<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聚美优品</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            background-color: hotpink;
            color: white;
        }

        div{
            margin: 0 auto;
            width: 360px;
            height: 200px;
        }
        .q2{

            font-size: 12px;
            color: white;
            background-color: black;
            height: 18px;
            width: 18px;
            line-height: 18px;
            border-radius: 100%;
            display: inline-block;
            text-align: center;
            display: inline-block;
            margin-right: 10px;
        }

        li{
            list-style-type: none;
            border-bottom: 1px dashed black;
        }
        a:hover{

            color: red;
        }
        a:hover>span{
            background-color: red;
        }

        li a{
            color: gray;
            text-decoration: none;
        }


    </style>
</head>
<body>

<div id="q1">

    <h2>大家都喜欢买的产品</h2>
    <ul>
        <li>  <a href="a"> <span class="q2">1 </span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
        <li>  <a href="a"> <span class="q2">2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
        <li>  <a href="a"> <span class="q2">3</span> 欧莱雅青春密码活颜精华肌底液</a></li>
        <li>  <a href="a">  <span class="q2">4</span>OLAY玉兰油多效修护霜 50g</a></li>
        <li>  <a href="a"> <span class="q2">5</span>巨型一号丝瓜水320ML</a></li>
        <li>  <a href="a"> <span class="q2">6</span>倩碧保湿洁肤水2号 200ml</a></li>
        <li>  <a href="a"> <span class="q2">7</span>比度克细肤淡印霜 30g</a></li>
        <li>  <a href="a"> <span class="q2">8</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
        <li>  <a href="a"> <span class="q2">9</span>SK-II护肤精华露 215ml</a></li>

    </ul>
</div>
</body>
</html>